Skip to content

Tree: double the disclosure chevron size#22

Merged
aaltshuler merged 1 commit into
mainfrom
tree-chevron
Jul 8, 2026
Merged

Tree: double the disclosure chevron size#22
aaltshuler merged 1 commit into
mainfrom
tree-chevron

Conversation

@aaltshuler

@aaltshuler aaltshuler commented Jul 8, 2026

Copy link
Copy Markdown
Collaborator

The ▸/▾ disclosure markers rendered at text-xs inside a w-4 box — visually tiny and hard to aim at. Now text-lg (≈2×) centered in a w-6 box. Note the whole row is the actual click/toggle target since the headless-tree migration, so this is a visibility/affordance fix rather than a hit-target one. Tests unaffected (8/8).

🤖 Generated with Claude Code

https://claude.ai/code/session_011TrhtF1SiJghJASMWECzBh

Greptile Summary

This PR enlarges the tree disclosure chevron (/) from text-xs in a w-4 container to text-lg in a w-6 flexbox container, improving visual visibility of the expand/collapse indicator. The fix also adds leading-none to prevent the larger font size from inflating row height, and flex items-center justify-center to center the Unicode triangle character within its now-wider box.

  • The chevron span grows from 16 px to 24 px wide; the label still uses truncate, so this is handled gracefully on narrow layouts.
  • Non-folder rows render an empty string in the same span, so leaf-node indentation alignment is unchanged in structure.

Confidence Score: 5/5

A focused visual tweak to one CSS class string — no logic, data, or API changes. Safe to merge.

The change touches a single span's Tailwind classes: the chevron container grows from 16 px to 24 px wide and the character scales from text-xs to text-lg, with flex centering and leading-none added. The label already uses truncate, so the slightly narrower text area is handled gracefully. No state, props, or behaviour is altered.

No files require special attention.

Important Files Changed

Filename Overview
packages/web/src/components/Tree.tsx Single-line CSS class change to the disclosure chevron span — increases size from text-xs/w-4 to text-lg/w-6 with proper flex centering; no logic changes.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Tree Row div\nflex items-center gap-1] --> B[Chevron span\nw-6 flex items-center justify-center\ntext-lg leading-none]
    A --> C[Label span\ntruncate text-sm]
    A --> D[Badge optional\nshowCounts && isFolder]
    B --> E{isFolder?}
    E -- yes --> F{isOpen?}
    E -- no --> G[empty string]
    F -- yes --> H[▾ expanded]
    F -- no --> I[▸ collapsed]
Loading
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Tree Row div\nflex items-center gap-1] --> B[Chevron span\nw-6 flex items-center justify-center\ntext-lg leading-none]
    A --> C[Label span\ntruncate text-sm]
    A --> D[Badge optional\nshowCounts && isFolder]
    B --> E{isFolder?}
    E -- yes --> F{isOpen?}
    E -- no --> G[empty string]
    F -- yes --> H[▾ expanded]
    F -- no --> I[▸ collapsed]
Loading

Reviews (1): Last reviewed commit: "Tree: double the disclosure chevron size" | Re-trigger Greptile

The ▸/▾ markers were text-xs in a w-4 box — hard to see and visually
too small a target. Now text-lg (2x) centered in a w-6 box. (The whole
row is the actual click/toggle target; this is a visibility fix.)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011TrhtF1SiJghJASMWECzBh
@aaltshuler aaltshuler merged commit f58e98a into main Jul 8, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant